<template>
  <view class="auth-container">
    <slot v-if="store.token"></slot>
    <view v-else class="no-auth">
      <uni-icons type="locked" color="#999" size="100" />
      <view class="no-auth-text">暂无访问权限</view>
      <button class="login-btn" @click="goToLogin">立即登录</button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useUserStore } from '@/stores/user'

const store = useUserStore()

const goToLogin = () => {
  uni.navigateTo({ url: '/pages/login/login' })
}
</script>

<style lang="scss" scoped>
.auth-container {
  min-height: 100vh;
}

.no-auth {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 200rpx;

  .no-auth-icon {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 30rpx;
  }

  .no-auth-text {
    font-size: 32rpx;
    color: #666;
    margin-bottom: 40rpx;
  }

  .login-btn {
    width: 300rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    background-color: #16c2a3;
    color: #fff;
    border-radius: 40rpx;
    font-size: 28rpx;
  }
}
</style>